.example-1 {
  padding: 30px;
  background: red;
}
.example-1 .box {
  border: 10px solid hsla(0, 0%, 100%, .5);
  background: #fff;
  background-clip: padding-box;
}

.example-2 .shadow {
  margin-bottom: 20px;
  padding: 50px;
  background: yellowgreen;
  box-shadow: inset 0 0 0 10px #655,
              inset 0 0 0 15px deeppink,
              0 2px 5px 15px rgba(0, 0, 0, .3);
}
.example-2 .outline {
  border-radius: 6px;
  outline: 1px dotted white;
  outline-offset: -10px;
  padding: 50px;
  color: white;
  background: black;
}

.example-3 .bg-origin {
  border: 5px solid black;
  padding: 20px;
  background: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat #655 bottom -10px right / 80px;
  background-origin: content-box;
}
.example-3 .calc {
  margin-top: 20px;
  border: 5px solid black;
  padding: 20px;
  background: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat #655;
  background-size: 80px;
  background-position: calc(100% - 20px) calc(100% - 10px);
}

.example-5 .vertical-horizontal {
  padding: 90px 20px;
  background: linear-gradient(#fb3 30%, #58a 0);
  background-size: 100% 45px;
}
.example-5 .oblique {
  margin-top: 20px;
  padding: 90px 20px;
  background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
}
.example-5 .overlay {
  margin-top: 20px;
  padding: 90px 20px;
  background: #58a;
  background-image: repeating-linear-gradient(60deg, 
                    hsla(0, 0%, 100%, .1),
                    hsla(0, 0%, 100%, .1) 15px,
                    transparent 0,
                    transparent 30px);
}
